<template>
  <div class="page">
    <du-nav-bar title="我要举报" url="/tsjb"></du-nav-bar>
    <div class="page-box">
      <van-form ref="myForm" @failed="onFailed">
        <div class="item-box">
          <van-cell-group>
            <!-- 通过 pattern 进行正则校验 -->
            <van-field
              v-model="data.title"
              label="举报主题"
              name="title"
              placeholder="请输入举报主题"
              :rules="titleRules"
            >
              <template #label> <span class="red">*</span><span>举报主题</span> </template>
            </van-field>
            <!-- 通过 validator 进行函数校验 -->
            <van-field
              v-model="data.content"
              rows="2"
              label="举报内容"
              name="content"
              type="textarea"
              maxlength="200"
              show-word-limit
              placeholder="请输入举报内容"
              :rules="[{ required: true, message: '请填写举报内容' }]"
            >
              <template #label> <span class="red">*</span><span>举报内容</span> </template>
            </van-field>
            <van-field name="uploader" label="上传照片">
              <template #input>
                <van-uploader
                  v-model="data.photos"
                  accept="image/png, image/PNG, image/jpeg, image/JPEG, image/jpg, image/JPG, image/gif, image/GIF"
                  :after-read="afterRead"
                  :before-delete="beforeDelete"
                />
              </template>
            </van-field>
          </van-cell-group>
        </div>
        <div class="item-box">
          <van-cell-group>
            <van-field v-model="data.name" label="姓名" name="name" placeholder="请输入姓名" :rules="nameRules">
              <template #label> <span class="red">*</span><span>姓名</span> </template>
            </van-field>
            <van-field
              v-model="data.idCard"
              label="身份证号"
              name="idCard"
              placeholder="请输入身份证号"
              :rules="idCardRules"
            >
              <template #label> <span class="red">*</span><span>身份证号</span> </template>
            </van-field>
            <van-field v-model="data.phone" label="手机号" name="phone" placeholder="请输入手机号" :rules="phoneRules">
              <template #label> <span class="red">*</span><span>手机号</span> </template>
            </van-field>
          </van-cell-group>
        </div>
        <div class="btn-box">
          <van-button type="primary" block tag="div" @click="toSubmit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { useForm, useImgUpload, useRules } from '../../../hooks/service/useFormTest.js'
import { Toast } from 'vant'

const { goto } = useGoto()
const { saveFormFn } = useForm()
const { fileList, afterRead } = useImgUpload()
const { phoneRules, idCardRules, titleRules, nameRules } = useRules()
const myForm = ref(null)

const data = reactive({
  title: '',
  content: '',
  photos: [],
  name: '',
  idCard: '',
  phone: '',
})

const onFailed = (errorInfo) => {
  console.log('failed', errorInfo)
}

// 删除钩子回调
const beforeDelete = (file, detail) => {
  nextTick(() => {
    fileList.splice(detail.index, 1)
    data.photos.splice(detail.index, 1)
  })
}

// 提交
const toSubmit = () => {
  myForm.value
    .validate()
    .then(() => {
      console.log('验证成功 ！')

      let p = toRaw(data)
      p.photos = fileList.map((item) => {
        return { id: item.id }
      })
      saveFormFn(p).then((res) => {
        Toast.success(res)
        goto('/')
      })
    })
    .catch(() => {
      console.log('失败')
    })
}
</script>

<style lang="scss" scoped>
.page-box {
  overflow-y: auto;
}
.item-box {
  width: 720px;
  margin: 0 auto;
  background: #ffffff;
  box-shadow: 0px 6px 12px 0px rgba(49, 67, 76, 0.03);
  border-radius: 16px;
  margin-top: 25px;
}
.btn-box {
  width: 720px;
  margin: 0 auto;
  margin-top: 80px;
  margin-bottom: 40px;
  text-align: center;
}
</style>
